/* Tabs  from http://docs.jquery.com/UI/Tabs */
 $(document).ready(function(){
    $("#cssform > ul").tabs();
  });

 $(document).ready(function(){
 var optsSpinner = {
		'line-height': {min: 50, max: 400, stepping: 50, format: '%'},
		'font-size': {min: 8, max: 32, stepping: 2, format: 'px'},
		'padding': {min: 0, max: 80, stepping: 2, format: 'px'},
		'margin': {min: 0, max: 50, stepping: 2, format: 'px'},
		'widthnum': {min: 100, max: 800, stepping: 20, format: 'px'},
		'border': {min: 1, max: 10, stepping: 1, format: 'px'},
		'text-indent': {min:-50, max: 100, stepping: 5, format: 'px'},
		'weightnum': {min:100, max: 900, stepping: 100, format: ''},
		'word-spacing': {min:-40, max: 40, stepping: 10, format: 'px'},
		'letter-spacing': {min:-15, max: 15, stepping: 1, format: 'px'}
 }
 
 
 for (var n in optsSpinner) {	    
		$("#" + n).spinner(optsSpinner[n]);
 }

  });
  

/* Update content with the form without submitting */
$(document).ready(function() {
	function formCSS(){		
		
		var fontFamily = $('#font-family').val();
		
		var fontSize = $('input[name=font-size]').val() + 'px';
		var padding = $('input[name=padding]').val() + 'px';
		var margin = $('input[name=margin]').val() + 'px';
		var fontStyle = $('#font-style').val();
		var fontVariant = $('#font-variant').val();
		var lineHeight = $('input[name=line-height]').val() + "%";
		var backgroundColor = $('#background-color').val();
		var width = $('input[name=width]:checked').val();
		if (width == 'custom') width = $('input[name=widthnum]').val() + 'px';
		var fontWeight = $('input[name=weight]:checked').val();
		if (fontWeight == 'custom') fontWeight = $('input[name=weightnum]').val();
		var borderStyle = $('#border-style').val();
		var borderColor = $('#border-color').val();
		var borderWidth = $('input[name=border]').val() + 'px';
		var textIndent = $('input[name=text-indent]').val() + 'px';
		var textAlign = $('input[name=text-align');
		var textDecoration = '';
		if ($('input[name=underline]:checked').val()=='underline') textDecoration += 'underline ';
		if ($('input[name=overline]:checked').val()=='overline') textDecoration += 'overline ';
		if ($('input[name=line-through]:checked').val()=='line-through') textDecoration += 'line-through ';
		if ($('input[name=blink]:checked').val()=='blink') textDecoration += 'blink ';
		var textTransform = $('input[name=transform]:checked').val();
		var letterSpacing = $('input[name=letter-spacing]').val() + 'px';
		var wordSpacing = $('input[name=word-spacing]').val() + 'px';
		var textAlign = $('input[name=text-align]:checked').val();
		var textVariant = '';
		if ($('input[name=small-caps]:checked').val()=='small-caps') textVariant = 'small-caps';
		var listStyleType = $('#list-style-type').val();
		var listStylePosition = $('input[name=list-style-position]:checked').val();
		
		$('#content').css("font-family", fontFamily);		
		$('#content').css("font-size", fontSize);
		$('#content').css("font-style", fontStyle);
		$('#content').css("font-variant", fontVariant);
		$('#content').css("font-weight", fontWeight);
		$('#content').css("line-height", lineHeight);
		$('#content').css("background-color", backgroundColor);
		$('#content').css("width", width);
		$('#content').css("padding", padding);
		$('#content').css("margin", margin);
		$('#content').css("border-style", borderStyle);
		$('#content').css("border-color", borderColor)
		$('#content').css("border-width", borderWidth);		
		$('#content').css("text-indent", textIndent);
		$('#content').css("text-align", textAlign);
    $('#content').css("text-decoration", textDecoration);	
		$('#content').css("text-transform", textTransform);
		$('#content').css("word-spacing", wordSpacing);
		$('#content').css("letter-spacing", letterSpacing);
		$('#content').css("text-align", textAlign);	
		$('#content').css("font-variant", textVariant);
		$('#contentlist').css("list-style-type", listStyleType);
		$('#contentlist').css("list-style-position", listStylePosition);
		
		//alert("line "+ lineHeight);
		//alert("font " + fontSize);
	}
	formCSS();
	$('#cssform').change(function() {formCSS(); });
	$('button').click(function() {formCSS(); });
});

